<template>
    <div class="Chat">
        <div class="Chat-interface">
            <div class="Chat-Title">
                <label>与</label>
                <span>{{nickname}}</span>
                <label>对话</label>
            </div>
            <div class="chat-content" >
                <ul id="MessageList">
                    <li v-for="(Getitem,Getindex) in GetMEaage" :key="Getindex">
                        <label class="chat-time">
                            <span>{{ Getitem.time* 1000 |formatDate}}</span>
                        </label>
                        <div  v-if="Getitem.from != unserinfo.user_id" class="chat-info">
                            <img :src="avatar" alt="">
                            <label>
                                 {{Getitem.payload.text}}
                            </label>
                        </div>
                        <div class="chat-infos" v-else>
                            <label>
                               {{Getitem.payload.text}}
                            </label>
                             <img :src="unserinfo.avatar" alt="">
                        </div>
                    </li>
                </ul>
                <div class="chat-input">
                    <textarea name="chatmessage" v-model="thetex" cols="30" rows="10"></textarea>
                    <span @click="Tochat">回复</span>
                </div>
            </div>
        </div>
        <div class="Chat-List">
            <h3>聊天列表</h3>
            <div class="Chatls">
                <ul>
                    <li v-for="(chatListitem,chatListindex) in Chatlists" :key="chatListindex" @click="Tochats(chatListitem)">
                        <label>
                            <img :src="chatListitem.userProfile.avatar" alt="">
                            <span>{{chatListitem.userProfile.nick}}</span>
                        </label>
                    </li>
                    <li v-for="(grounitem,grounindex) in Chatlistsgroun" :key="grounindex" @click="Tochats(grounitem)">
                        <label>
                            <img :src="grounitem.groupProfile.avatar" alt="">
                            <span>{{grounitem.groupProfile.name}}</span>
                        </label>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>
<script>
import { formatDate } from "../../js/them";
import TIM from 'tim-js-sdk';
let options = {
  SDKAppID: 1400255047 // 接入时需要将0替换为您的即时通信 IM 应用的 SDKAppID
};
let tim = TIM.create(options); // SDK 实例通常用 tim 表示
export default {
    name:'Chat',
    data(){
        return{
            toid:this.$route.query.toid,
            nickname:this.$route.query.name,
            avatar:this.$route.query.avatar,
            thetex:'',
            Chatlists:[],
            Chatlistsgroun:[],
            Mysendmessage:[],
            unserinfo:JSON.parse(localStorage.getItem('userinfo')),
            conversationID:this.$route.query.conversationID,
            GetMEaage:[],
            
        }
    },
    filters: {
        formatDate(time) {
            var date = new Date(time);
            return formatDate(date, "yyyy-MM-dd hh:mm");
        }
    },
    created:function(){
        this.GethistoryMessage()
    },
    mounted(){
        this.getConvers()
        this.Timon()
    },
    updated(){
        // 聊天定位到底部
          let ele = document.getElementById('MessageList');
          ele.scrollTop = ele.scrollHeight;
    },
    methods:{
        Tochat(){
            var _this = this
            let message = tim.createTextMessage({
                to: _this.toid,
                conversationType: TIM.TYPES.CONV_C2C,
                payload: {
                    text: _this.thetex
                }
            });
            // 2. 发送消息
            let promise = tim.sendMessage(message);
            promise.then(function(imResponse) {
            // 发送成功
                _this.thetex =''
                _this.GetMEaage.push(imResponse.data.message)
            }).catch(function(imError) {
            // 发送失败
            console.log('sendMessage error:', imError);
            });
        },
        Tochats(item){
            console.log(item,'000')
            if(item.type == "GROUP"){
                this.nickname =item.groupProfile.name
                this.avatar = item.groupProfile.avatar
                this.toid =item.groupProfile.groupID
            }else{
                this.nickname =item.userProfile.nick
                this.avatar = item.userProfile.avatar
                this.toid =item.userProfile.userID
            }
            this.conversationID = item.conversationID
            this.GethistoryMessage()
        },
        GethistoryMessage(){
            var _this = this
            _this.GetMEaage =[]
            // 打开某个会话时，第一次拉取消息列表
            let promise = tim.getMessageList({conversationID: this.conversationID, count: 15});
            promise.then(function(imResponse) {
                const messageListss = imResponse.data.messageList; // 消息列表。
                _this.GetMEaage=messageListss
                console.log(_this.GetMEaage)
            });
        },
        Timon(){
            var _this = this
            let onMessageReceived = function(event) {
                // event.data - 存储 Message 对象的数组 - [Message]
                console.log(event)
                _this.GetMEaage.push(event.data[0])
                console.log( _this.GetMEaage,'我收到了吗')
            };
            tim.on(TIM.EVENT.MESSAGE_RECEIVED, onMessageReceived);
        },
        getConvers(){
            var _this = this
            let promise = tim.getConversationList();
            promise.then(function(imResponse) {
                const conversationList = imResponse.data.conversationList; // 会话列表，用该列表覆盖原有的会话列表
                conversationList.forEach(e=>{
                    if(e.type == 'C2C'){
                        _this.Chatlists.push(e)
                    }else{
                        _this.Chatlistsgroun.push(e)
                    }
                })
                console.log(conversationList,'会话列表')
            }).catch(function(imError) {
            console.warn('getConversationList error:', imError); // 获取会话列表失败的相关信息
            });
        }
    }
}
</script>
<style lang="less" scoped>
    .Chat{
        position: relative;
        width: 100%;
        height: 1140px;
        background: #ffffff;
        border-radius: 20px ;
        display: flex;
        padding-bottom: 100px;
    }
    .Chat-interface{
        position: relative;
        width: 913px;
        height: 70%;
        border-bottom:1px solid rgba(233,233,233,1);
    }
    .Chat-Title{
        position: relative;
        width: 100%;
        height: 80px;
        display: flex;
        align-items: center;
        justify-content: center;
        label{
            width: 10%;
            text-align: center;
            color: #BDBDBD;
            font-size: 16px;
        }
        span{
            color: #353535;
            font-size: 16px;
        }
    }
    .chat-content{
        width: 100%;
        position: relative;
        height: 80%;
        ul{
            width: 100%;
            display: flex;
            height: 80%;
            list-style: none;
            padding: 0;
            margin-top: 40px;
            flex-wrap: wrap;
            overflow-y: auto;
            li{
                width: 100%;
            }
        }
    }
    .chat-time{
        display: flex;
        width: 100%;
        span{
            width: 100%;
            text-align: center;
            color: #C2C2C2;
            font-size: 14px;
        }
    }
    .chat-input{
        display: flex;
        width: 90%;
        align-items: center;
        position: absolute;
        left: 4%;
    }
    .chat-input>textarea{
        position: relative;
        width: 80%;
        height: 90px;
        border:1px solid rgba(233,233,233,1);
        padding-left: 4%;
        padding-top: 4%;
        outline: none;
    }
    .chat-info{
        position: relative;
        width: 100%;
        height: 120px;
        display: flex;
        align-items: center;
    }
    .chat-info>img,.chat-infos>img{
        width: 60px;
        padding-left: 4%;
        border-radius: 60px;
    }
    .chat-info>label,.chat-infos>label{
        background: #EDEDED;
        max-width: 60%;
        min-height: 65px;
        border-radius: 10px;
        margin-top: 4%;
        margin-left: 4%;
        display: flex;
        align-items: center;
    }
    .chat-input>span{
        display: inline-block;
        width: 14%;
        height: 30px;
        background:rgba(71,206,207,1);
        text-align: center;
        line-height: 30px;
        color: #ffffff;
        margin-left: 4%;
        cursor: pointer;
        border-radius: 5px;
    }
    .chat-infos{
        position: relative;
        width: 100%;
        height: 120px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }
    .chat-infos>img{
        padding-right: 4%;
        border-radius: 60px;
    }
    .chat-infos>label{
        background:rgba(188,238,238,1);
    }
    .Chat-List{
        position: relative;
        width: 196px;
        border-left: 1px solid  rgba(233,233,233,1);
        border-bottom:1px solid rgba(233,233,233,1);
        height: 70%;
    }
    .Chat-List>h3{
        width: 60%;
        height: 40px;
        line-height: 40px;
        text-align: left;
        font-size: 16px;
        color: #353535;
        font-weight: normal;
        margin: 0 auto;
    }
    .Chatls{
        position: relative;
        width: 60%;
        margin: 0 auto;
        ul{
            width: 100%;
            list-style: none;
            padding: 0;
            display: flex;
            flex-wrap: wrap;
            li{
                width: 100%;
                height: 40px;
                display: flex;
                align-items: center;
                margin-top: 10px;
                cursor: pointer;
                label{
                    display: flex;
                    width: 100%;
                    height: 40px;
                    align-items: center;
                    cursor: pointer;
                    img{
                        width: 30px;
                        height: 30px;
                        border-radius: 30px;
                    }
                    span{
                        display: inline-block;
                        margin-left: 10px;
                        font-size: 14px;
                    }
                }
            }
        }
    }
</style>